<template>
  <div class="departments">
    <Head></Head>
    <DepartHeader></DepartHeader>
    <div class="departlist">
      <div class="dsearch">
        <div class="dsearchInput"><span>请输入科室名称</span></div>
      </div>

      <div class="dlist">
        <div
          class="dlist-item"
          v-for="item in departList"
          :key="item.id"
          @click="goDepartIntroduce(item)"
        >
          <span>{{ item.departmentName }}</span>
          <div class="itemicon">
            <img :src="departIconImg" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import DepartHeader from "@/components/DepartHeader/index.vue";
import departIconImg from "@/assets/images/departIcon.png";
import { getDepartmentsListApi, getDoctorsListApi } from "@/api/departments";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import type { Department } from "./type";
const departList = ref<Department[]>([]);
const router = useRouter();
onMounted(() => {
  getDepartList();
});
const getDepartList = async () => {
  const { result } = await getDepartmentsListApi();
  departList.value = result;
};
const goDepartIntroduce = (item: any) => {
  router.push({
    path: "/departIntroduce",
    query: {
      departmentId: item.id,
      departmentIntroduction: item.departmentIntroduction,
    },
  });
};
</script>
<style lang="scss" scoped>
@import "@/styles/mixins.scss";
.departments {
  @include container;
  .departlist {
    .dsearch {
      width: 100%;
      height: 140px;
      .dsearchInput {
        width: 92%;
        height: 120px;
        border-radius: 60px;
        background: linear-gradient(to right, #c2f0fd, #92d2fb);
        margin: 4% auto;
        padding: 36px;

        span {
          font-size: 40px;
          color: #5995bb;
        }
      }
    }
  }
  .dlist {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 20px 4%;

    .dlist-item {
      width: 300px;
      height: 120px;
      display: flex;
      margin-right: 31px;
      margin-bottom: 30px;
      align-items: center;
      justify-content: space-around;
      background-image: url("@/assets/images/departbg.png");
      .itemicon {
        width: 38px;
        height: 38px;
        border-radius: 50%;

        overflow: hidden;
        margin-top: 5px;
        background-color: #ffffff;
      }
      span {
        font-size: 36px;
        color: #fafafa;
      }
    }
  }
}
</style>
